<template>
  <div class="box">
    <div class="top">
      <span>人气推荐</span>
    </div>
    <div class="container">
      <div class="container-item"
       v-for="(item,index) in popularityList.slice(14,18)" 
       :key="index" 
       @click="goDetails(item.id)">
         <!-- 商品图片-->
        <img :src="item.pic" alt/>
       <!--  商品名字-->
        <span class="s1">{{item.name}}</span>
       <!-- 商品价格 -->
        <span class="s2">￥{{item.minPrice}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    popularityList: function () {
      return this.$store.state.homeStore.bargainirg;
    },
  },
  mounted() {
   
  },
  methods:{
    goDetails(id){
      this.$store.dispatch("get_goods_details",id)
      this.$router.push({
        path:"/goods_details"
      })
    }
  }
};
</script>

<style scoped>
.box {
  background-color: #fff !important;
  height: 9.6rem;
}
.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.65rem;
  text-align: center;
}
.top span {
  margin: 0 auto;
  font-size: 0.3rem;
}
.container{
  width: 100%;
  height: 8rem;
  display:inline-flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
}
.container-item{
  width: 43%;
  height: 3.8rem;
  display:inline-flex;
  flex-wrap: wrap;
  padding: 0.2rem 0rem;
}
.container-item img{
  width: 2.4rem;
  height: 2.8rem;
  padding: 0.2rem 0.4rem;
}
.container-item .s1{
  font-size:0.12rem;
  padding-left: 0.3rem;
}
/* 超出显示…… 的代码*/
.container-item .p1{
/* 将对象作为弹性伸缩盒子模型展示 */
  display: -webkit-box;
  /* 从上到下垂直排列元素 */
  -webkit-box-orient: vertical; 
  /* 组合元素，表示显示的行数 */
  -webkit-line-clamp: 1; 
  /* 超出的文本显示隐藏 */
   overflow: hidden;
}
.container-item .s2{
  color:red;
  font-size:0.2rem;
  margin-top: 0.2rem;
  padding-left: 1.4rem;
}
 


</style>